<template>
    <div id="bbq">
        <h3>{{test.title}}</h3>
        <div class="div-box">
            <span>时间 : {{test.add_time | ctime}}</span>
            <span>点击 : {{test.click}}</span>
        </div>
        <hr>
        <div v-html="test.content"></div>

        <!-- 通过绑定属性的方法父组件给子组件传值 那边有props来接收 -->
        <pinlun :id="id"></pinlun>
    </div>
</template>
<script>
// 这个页面是新闻详情页面



// 导入评论组件
import pinlun from './pinlun/pinlun.vue'

export default {
    data () {
        return {
            id : this.$route.params.id,
            test :{}
        }
    },
    created() {
        this.son()
    },
    methods : {
        son() {
            // 因为 他是个数组 有很多不相关的值 所以只取第一项 也就是索引0 这里也需要通过id渲染不同的数据 
            // 2种方法 params  和 query   他们都是route的属性  在journalism.vue中通过:to="'/son'+val.id"传递对应的id 在此处用params来接收
            this.$http.get('api/getnew/'+this.id).then( res=>{
                this.test = res.body.message[0]
            })
        }
    },
    components : {
        pinlun,
    }
}
</script>
<style lang="less">
    #bbq {
        padding:  0 5px;
        h3 {
            font-size: 16px;
            text-align: center;
            margin: 6px 0;
        }
        .div-box {
            display: flex;
            justify-content: space-between;
            span {
            font-size: 12px;
            color: red;
        }
        }
        
    }
</style>

